<template>
  <footer>
    <div class="footer-content index-container">
      <div class="footer-content-item business">
        <div class="footer-item-title">业务云</div>
        <div class="footer-item-content">
          <div class="footer-item">
            <a href="//www.youzanyun.com/ecommerce" target="_blank">电商云</a>
          </div>
        </div>
      </div>
      <div class="footer-content-item coming">
        <div class="footer-item-title">即将上线</div>
        <div class="footer-item-content">
          <div class="footer-item">
            <span>零售云</span>
          </div>
          <div class="footer-item">
            <span>营销云</span>
          </div>
          <div class="footer-item">
            <span>客户云</span>
          </div>
          <div class="footer-item">
            <span>服务云</span>
          </div>
          <div class="footer-item">
            <span>数据云</span>
          </div>
        </div>
      </div>
      <div class="footer-content-item help">
        <div class="footer-item-title">帮助和支持</div>
        <div class="footer-item-content">
          <div class="footer-item">
            <a href="//doc.youzanyun.com" target="_blank">文档中心</a>
          </div>
          <div class="footer-item">
            <a href="//doc.youzanyun.com/resource/doc/3379" target="_blank">常见问题</a>
          </div>
          <div class="footer-item">
            <a href="//doc.youzanyun.com/resource/doc/3546" target="_blank">平台公告</a>
          </div>
          <div class="footer-item">
            <a href="//doc.youzanyun.com/resource/doc/3484" target="_blank">运营规范</a>
          </div>
          <div class="footer-item">
            <a href="//doc.youzanyun.com/resource/doc/3317" target="_blank">解决方案</a>
          </div>
        </div>
      </div>
      <div class="footer-content-item product">
        <div class="footer-item-title">有赞产品</div>
        <div class="footer-item-content">
          <div class="footer-item">
            <a href="https://www.youzan.com/intro/wsc?from_source=baidu_pz_shouye_l1&amp;" target="_blank">有赞微商城</a>
          </div>

          <div class="footer-item">
            <a href="https://www.youzan.com/intro/lingshou" target="_blank">有赞零售</a>
          </div>

          <div class="footer-item">
            <a href="https://www.youzan.com/intro/beauty" target="_blank">有赞美业</a>
          </div>
          <div class="footer-item">
            <a href="https://www.youzan.com/intro/edu" target="_blank">有赞教育</a>
          </div>

        </div>
      </div>
    </div>
    <div class="footer-content-bottom index-container">
      <div class="common_copy">
        <span>
          <a class="backup-link" target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602008231">
            <img src="https://img01.yzcdn.cn/public_files/2016/07/19/276d5f72dc85cc584d83c08fefa36c2b.png" width="14px"
              height="14px">
            <span>浙公网安备 33010602008231号 </span>
          </a>
        </span>
        <span>增值电信业务经营许可证：浙B2-20140331 -</span>
        <a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备13037466号-12</a>
      </div>
      <div class="copyright">© 2012-2020 Youzan.com</div>
    </div>
  </footer>
</template>

<script>
export default {

}
</script>

<style>
footer {
  position: relative;
  height: 387px;
  background: #34383b
}

.index-container {
  width: 1100px;
  margin: auto
}

footer .footer-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

footer .footer-content-item {
  height: 120px;
  margin-top: 70px
}

footer .footer-content-item .business {
  width: 110px
}

footer .footer-content-item .coming {
  width: 300px
}

footer .footer-content-item .help {
  width: 400px
}

footer .footer-content-item .product {
  width: 200px
}

footer .footer-content-item .footer-item-title {
  margin-bottom: 20px;
  color: #f8f8f8;
  font-size: 20px
}

footer .footer-content-item .footer-item-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  color: #e5e5e5;
  font-size: 14px
}

footer .footer-content-item .footer-item {
  width: 96px;
  margin: 10px 0;
  line-height: 14px
}

footer .footer-content-item:first-child {
  width: 96px
}

footer .footer-content-item:nth-child(2) {
  width: 288px
}

footer .footer-content-item:nth-child(3) {
  width: 384px
}

footer .footer-content-item:nth-child(4) {
  width: 192px
}

footer .footer-content-bottom {
  margin-top: 40px;
  padding: 30px 0;
  color: #999;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid hsla(0, 0%, 89.8%, .2)
}

footer .common_copy {
  display: flex;
  align-items: center;
  justify-content: center
}

footer .common_copy span {
  margin: 0 4px;
  line-height: 12px
}

footer .common_copy .backup-link {
  display: flex;
  align-items: flex-end
}

footer .copyright {
  margin-top: 40px
}

footer a {
  color: currentColor
}
</style>